<template>
  <div class="Investment_cont">
    <el-card>
      <div class="search">
      <el-input v-model="info" placeholder="输入名字进行搜索" clearable @input="info === '' ? flg = true : ''" @clear="flg = true"></el-input>
      <el-button type="primary" @click="queryData">查询</el-button>
    </div>
    </el-card>
    <!-- 园区企业 -->
    <el-card class="Industry">
      <div class="Industry_title Industry_title_btn">
        <el-button type="primary" @click="addCompanyToBtn">新增企业</el-button>
      </div>
      <el-table :data="AfterChangeData" border style="width: 80%" class="Industry_table">
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <div v-text="(queryInfo.pageNum - 1) * queryInfo.pageSize + 1 + scope.$index"></div>
          </template>
        </el-table-column>
        <el-table-column prop="floor" label="所属园区" align="center"></el-table-column>
        <el-table-column prop="name" label="企业名称" align="center"></el-table-column>
        <el-table-column prop="name" label="企业简介" align="center"></el-table-column>
        <el-table-column prop="name" label="排序" align="center"></el-table-column>
        <el-table-column prop="name" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="text" @click="showEditDialog(scope.row.id)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="text"  @click="removeInfo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-size="queryInfo.pagesize"
        :page-sizes="[1, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.tableData.length">
      </el-pagination>
    </el-card>
    <!-- 新增园区企业的对话框 -->
    <el-dialog title="新增企业" :center="true" :closeOnClickModal="false" class="dialogIndustry" :visible.sync="dialogVisible" width="50%" >
        <!-- 内容主体区 -->
        <el-form ref="addCompanyRef" :model="add_company" :rules="companyRules" label-width="100px">
          <el-form-item label="所属园区：" prop="floor">
            <el-select v-model="add_company.floor" placeholder="请选择园区">
              <el-option label="2F" value="2F"></el-option>
              <el-option label="3F" value="3F"></el-option>
              <el-option label="4F" value="4F"></el-option>
              <el-option label="5F" value="5F"></el-option>
              <el-option label="6F" value="6F"></el-option>
              <el-option label="7F" value="7F"></el-option>
              <el-option label="8F" value="8F"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业名称：" prop="name">
            <el-input v-model="add_company.name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="企业介绍">
            <el-input type="textarea" :rows="8" placeholder="请输入企业介绍" v-model="add_company.introduce"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="name">
            <el-input v-model="add_company.name" placeholder="请输入排序值，值越小排越前"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCompanyTo">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑园区企业的对话框 -->
    <el-dialog title="编辑企业" :center="true" class="dialogIndustry" :visible.sync="dialogVisibleEdit" width="50%" >
        <!-- 内容主体区 -->
        <el-form ref="addCompanyRef" :model="get_company_data" :rules="companyRules" label-width="100px">
          <el-form-item label="所属园区：" prop="floor">
            <el-select v-model="get_company_data.floor" placeholder="请选择楼层">
              <el-option label="2F" value="2F"></el-option>
              <el-option label="3F" value="3F"></el-option>
              <el-option label="4F" value="4F"></el-option>
              <el-option label="5F" value="5F"></el-option>
              <el-option label="6F" value="6F"></el-option>
              <el-option label="7F" value="7F"></el-option>
              <el-option label="8F" value="8F"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业名称：" prop="name">
            <el-input v-model="get_company_data.name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="企业简介">
            <el-input type="textarea" :rows="8" placeholder="请输入企业简介" v-model="get_company_data.introduce"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="name">
            <el-input v-model="add_company.name" placeholder="请输入排序值，值越小排越前"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleEdit = false">取 消</el-button>
            <el-button type="primary" @click="EditCompanyTo">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 办公区租赁的数据
      office_area: {},
      // 获取办公区租赁的数据
      get_office_area: {},
      // 办公租赁明细的数据
      office_detail: {},
      // 获取办公租赁明细的数据
      get_office_detail: {},
      // 表格的数据
      tableData: [],
      // 添加按钮的显示
      dialogVisible: false,
      // 编辑按钮的显示
      dialogVisibleEdit: false,
      // 添加企业表单的数据
      add_company: {
        floor: '',
        name: '',
        address: '',
        introduce: ''
      },
      // 获取当前企业表单的数据
      get_company_data: {},
      // 对话框的规则
      companyRules: {
        floor: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      // 园区企业的分页
      queryInfo: {
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 10
      }
    }
  },
  async created () {
    this.get_office()
    this.getOfficeData()
    this.get_add_company()
  },
  computed: {
    // 未出租面积 办公配套面积 - 已出租面积
    // calculation_unletable_area () {
    //   return this.get_office_area.office_area - this.get_office_area.leasehold_area
    // },
    // 出租率 已出租面积 / 办公配套面积
    calculation_area_rate () {
      return Math.round(this.get_office_area.leasehold_area / (this.get_office_area.leasehold_area + this.get_office_area.unletable_area) * 100)
    },
    // 未出租 车位总数 - 已出租
    calculation_car_not_rent () {
      return this.get_office_area.car_num - this.get_office_area.car_leasehold
    },
    // 出租率 已出租 / 车位总数
    calculation_car_rate () {
      return Math.round(this.get_office_area.car_leasehold / this.get_office_area.car_num * 100)
    },
    // 园区企业的分页的table数据
    AfterChangeData () {
      const start = (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize
      const end = this.queryInfo.pageNum * this.queryInfo.pageSize
      return this.tableData.slice(start, end)
    }
  },
  methods: {
    // 获取办公区租赁的数据
    async get_office () {
      const { data: res } = await this.$http.get('office_area')
      this.office_area[0] = res.data
      for (const key in this.office_area[0][0]) {
        this.office_area[0][0][key] = Number(this.office_area[0][0][key])
      }
      this.get_office_area = this.office_area[0][0]
      // console.log(this.get_office_area)
    },
    // 修改租赁的情况
    officeChange () {
      this.$refs.officeRef.validate(async valid => {
        if (!valid) return false
        await this.$http.post(`office_area/${this.get_office_area.id}`, {
          office_area: this.get_office_area.office_area,
          office_room: this.get_office_area.office_room,
          car_num: this.get_office_area.car_num,
          leasehold_area: this.get_office_area.leasehold_area,
          unletable_area: this.get_office_area.unletable_area,
          car_leasehold: this.get_office_area.car_leasehold,
          _method: 'put'
        })
        this.get_office()
      })
    },
    // 获取办公租赁明细的数据
    async getOfficeData () {
      const { data: res } = await this.$http.get('office_detail')
      res.data.map(item => {
        item.rent = Number(item.rent)
        item.not_rent = Number(item.not_rent)
      })
      this.office_detail = res.data
    },
    // 修改办公租赁明细
    async detailedChange (num1, num2, id) {
      // this.$refs.detailedRef.validate(async valid => {
      //   if (!valid) return false
      if (num1 === '' || num2 === '') return 0
      await this.$http.post(`office_detail/${id}`, {
        rent: num2,
        not_rent: num1,
        _method: 'put'
      })
      this.getOfficeData()
      // })
    },
    // 获取园区企业的数据
    async get_add_company () {
      const { data: res } = await this.$http.get('add_company')
      this.tableData = res.data
    },
    // 新增园区企业的数据按钮
    addCompanyToBtn () {
      this.dialogVisible = true
      this.add_company.floor = ''
      this.add_company.name = ''
      this.add_company.address = ''
      this.add_company.introduce = ''
    },
    // 新增园区企业的数据
    addCompanyTo () {
      this.$refs.addCompanyRef.validate(async valid => {
        if (!valid) return false
        const { data: res } = await this.$http.post('add_company', this.add_company)
        this.get_add_company()
        this.dialogVisible = false
        if (res.msg === 'success') this.$message({ message: '添加成功', type: 'success' })
      })
    },
    // 点击编辑按钮
    async showEditDialog (id) {
      this.dialogVisibleEdit = true
      const { data: res } = await this.$http.get(`add_company/${id}`)
      this.get_company_data = res.data
    },
    // 确认编辑
    async EditCompanyTo () {
      const { data: res } = await this.$http.post(`add_company/${this.get_company_data.id}`, {
        floor: this.get_company_data.floor,
        name: this.get_company_data.name,
        introduce: this.get_company_data.introduce,
        _method: 'put'
      })
      this.get_add_company()
      if (res.msg === 'success') this.$message({ message: '编辑成功', type: 'success' })
      this.dialogVisibleEdit = false
    },
    // 删除园区企业的数据
    async removeInfo (id) {
      const { data: res } = await this.$http.delete(`add_company/${id}`)
      this.get_add_company()
      if (res.msg === 'success') this.$message({ message: '删除成功', type: 'success' })
    },
    // 监听 园区企业 pagesize改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
    },
    // 监听 园区企业 页码值 改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
    }
  }
}
</script>

<style lang="less" scoped>
.Investment_cont{
  padding: 1rem;
  .lease{
    margin-bottom: 1rem;
    .lease_title{
      position: relative;
      h2{
        padding-left: 0.7rem;
        font-size: 1.25rem;
        font-weight: bold;
      }
      ::after{
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        width: 3px;
        height: 20px;
        background-color: #000;
      }
    }
    .leaseFrom{
      width: 50%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 1rem;
      h3{
        width: 100%;
        font-size: 1rem;
        margin-left: -0.3125rem;
        padding: 0.5rem 0;
      }
      .el-form-item{
        width: 33%;
        text-align: center;
        margin-bottom: 0;
        .el-input{
          width: 80%;
          margin-left: -1rem;
        }
      }
    }
  }
  .detailed{
    margin-bottom: 1rem;
    .detailed_title{
      position: relative;
      h2{
        padding-left: 0.7rem;
        font-size: 1.25rem;
        font-weight: bold;
      }
      ::after{
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        width: 3px;
        height: 20px;
        background-color: #000;
      }
    }
    .detailed_box{
      width: 50%;
      display: flex;
      flex-direction: column;
      .detailed_box_title{
        display: flex;
        justify-content: space-between;
        padding: 1rem 0;
        span{
          width: 20%;
          text-align: center;
        }
      }
      .detailed_items{
        display: flex;
        justify-content: space-between;
        // margin-bottom: 1rem;
        text-align: center;
        .item{
          width: 20%;
          display: flex;
          justify-content: center;
          .el-input{
            width: 80%;
            .el-input--small .el-input__inner{
              text-align: center;
            }
          }
        }
      }
    }
  }
  .Industry{
    .Industry_title_btn{
      display: flex;
      align-items: center;
      .el-button{
        width: 7%;
        padding: 8px;
        font-size: 14px;
        border-radius: 5px;
        align-self: flex-start;
        // margin-left: 2rem;
      }
    }
    .Industry_table{
      margin: 1rem 0;
    }
  }
  .dialogIndustry{
    .el-form{
      width: 80%;
      .el-select{
        width: 100%;
      }
    }
  }
}
.Investment_cont{
  padding: 1rem;
  .el-card{
    &:nth-child(1){
      margin-bottom: 1rem;
    }
  }
  h2{
    font-size: 1.25rem;
    font-weight: 500;
  }
  .search{
    width: 50%;
    display: flex;
    align-items: center;
    padding: 1rem 0;
    .el-input{
      width: 45%;
    }
    .el-button{
      margin-left: 2rem;
      background-color: #275fdb;
      border-color: #275fdb;
      border-radius: 7px;
      padding: 10px 30px;
    }
  }
}
</style>
